<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <el-container>
        <el-container>
          <el-main>
            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">运行监控</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/operationmonitoring/runcontroller' }">
                  <font color="#A1FEDB" size="4">运行控制</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">系统平衡控制</font>
                </el-breadcrumb-item>
               
              </el-breadcrumb>
            </el-row>
            <el-row>
               <div id="allmap">
              <!-- <el-row>
                <el-table
                  id="printJS-form"
                  :data="tableData"
                  style="width: 100%"
                  :row-style="getRowClass"
                  :header-row-style="getRowClass"
                  :header-cell-style="getRowClass2"
                  @cell-mouse-enter="changerow"
                >
                  <el-table-column prop="name1" label="负荷名称" width="180">
                  </el-table-column>
                  <el-table-column prop="name2" label="负荷分类" width="180">
                  </el-table-column>
                  <el-table-column prop="name2" label="负荷编号" width="180">
                  </el-table-column>
                  <el-table-column prop="name3" label="负荷影响程度">
                  </el-table-column>
                </el-table>
              </el-row> -->
            </div>
            </el-row>
           
          </el-main>
        </el-container>
      </el-container>
      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'

export default {
  data() {
    return {
      reportZoom: 'FitPage',
      tableData: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        }
      ],
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'right',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      }
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu,
    Index,
    Bottom
  },
  computed: {},
  watch: {},
  created() {},

  mounted() {},

  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#005A5B;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#3f5c6d2c;color:#FEFEFE;'
    }
  }
}
</script>
<style lang="less" scoped>
#topology-canvas {
  width: 100%;
  height: 700px;
  background-color: #9af2f3;
  border-radius: 20px;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
}
.el-form-item__label {
  color: white;
}
#table1 {
  width: 330px;
  height: 320px;
  background-color: white;
}

#table2 {
  width: 330px;
  height: 320px;
  background-color: white;
}

#table3 {
  width: 330px;
  height: 320px;
  background-color: white;
}
#table4 {
  width: 400px;
  height: 300px;
  background-color: '#005A5B';
  color: 'white';
}
#allmap {
  height: 800px;
  color: white;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 300px;
  margin-top: 100px;
  background-image: url(../../assets/images/图片2.png);
  background-repeat: no-repeat; /* 不进行平铺 */
}
#chart_example1 {
  width: 400px;
  height: 300px;
  //  border: 1px solid red;
  margin: 0 auto;
}
#chart_example2 {
  width: 400px;
  height: 300px;
  // border: 1px solid red;
  margin: 0 auto;
}
#chart_example3 {
  width: 200px;
  height: 200px;
  // border: 1px solid red;
  margin: 0 auto;
}
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  // background-image: url(../assets/images/background.jpg);
  // background-color: rgb(0, 101, 105);
  background-color: #005b5c;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.table {
  // background-color: rgb(0, 101, 105);
  background-color: #005b5c;
}

.tableShow {
  // background-image: url(../assets/images/background.jpg);
  // margin-left:20px;
  // margin-right:20px;
  // padding-left: 20px;
  // padding-right: 20px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bm-view {
  width: 100%;
  height: 800px;
}
.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
.el-header {
  // background-color: #373d41;
  // display: flex;
  align-items: center;
}

// .el-aside{
//     background-color: #373d41;
// }
// .el-main{
//     background-color: #EAEDF1;
// }
</style>
